<template>
	<div class="home-page">
		<el-card class="box-card" shadow="never">
			<static-table :tableData="tableData">
				<template #vux-column>
					<vxe-column type="seq" title="序号" width="60" />
					<vxe-column field="name" title="姓名" />
					<vxe-column field="sex" title="姓名" />
					<vxe-column field="age" title="姓名" />
					<vxe-column field="address" title="地址" />
				</template>
			</static-table>
			<el-pagination background :current-page="searchForm.pageNum" layout="total, sizes, prev, pager, next, jumper" :page-size="searchForm.pageSize" :total="dataCount" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
		</el-card>
	</div>
</template>

<script setup>
const state = reactive({
	searchForm: {
		pageNum: 1,
		pageSize: 10,
	},
	dataCount: 10,
})
const { searchForm, dataCount } = toRefs(state)
const tableData = ref([
	{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
	{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
	{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
	{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
])
const handleSizeChange = val => {
	state.searchForm.pageSize = val
	getTableList()
}
const handleCurrentChange = val => {
	state.searchForm.pageNum = val
	getTableList()
}
const getTableList = () => {}
onMounted(() => {
	// global.$baseConfirm(
	// 	'111',
	// 	'2233',
	// 	() => {
	// 		console.log('1')
	// 	},
	// 	() => {
	// 		console.log('2')
	// 	}
	// )
})
</script>
